<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>上海地图</title>
  <!-- 引入高德地图JS API -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e18e66edf3e406ef922d9bc9b02e93fc"></script>
  <style>
    #container {
      width: 100%;
      height: 100vh;
    }

    #legend {
      position: absolute;
      top: 100px;
      left: 10px;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px #999;
      z-index: 1000;
      display: block;
    }
    #legend h4 {
      margin-top: 0;
    }
    #toggleLegend {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1001;
      background: #fff;
      border: none;
      padding: 15px 20px; /* 增大按钮的内边距 */
      font-size: 18px;    /* 增大字体大小 */
      border-radius: 10px; /* 增加圆角 */
      cursor: pointer;
      box-shadow: 0 0 10px #999; /* 增强按钮的阴影效果 */
      font-weight: bold;  /* 让文字更加醒目 */
    }

  </style>
</head>
<body>
<div id="container"></div>
<button id="toggleLegend">隐藏图例</button>
<div id="legend">
  <h4>图例</h4>
  <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png" style="width: 20px;"> 沈家路946弄 </p>
  <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png" style="width: 20px;"> 奥乐齐（滨江光合新座店） </p>
  <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hhl_logo.png" style="width: 20px;"> 中信五牛城 </p>
  <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/sihangcangku.png" style="width: 20px;"> 梅园五街坊 </p>

</div>
<script type="text/javascript">
  //图例
  var toggle = document.getElementById('toggleLegend');
  var legend = document.getElementById('legend');

  toggle.onclick = function() {
    if (legend.style.display === 'none') {
      legend.style.display = 'block';
      toggle.textContent = '隐藏图例';
    } else {
      legend.style.display = 'none';
      toggle.textContent = '显示图例';
    }
  };

  //地图
  var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 14,
    center: [121.547638,31.240391] // 设置中心点为沈家弄路946弄
  });

  // 创建不同的图标
  var hhlIcon = new AMap.Icon({
    size: new AMap.Size(50, 50), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hhl_logo.png', // 黄鹤楼图标
    imageSize: new AMap.Size(50, 50)
  });

  var mtIcon = new AMap.Icon({
    size: new AMap.Size(50, 50), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mt_logo.png', // 码头图标
    imageSize: new AMap.Size(50, 50)
  });

  var jhlIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png', // 江汉路图标
    imageSize: new AMap.Size(30, 30)
  });

  var kgIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png', // 空轨图标
    imageSize: new AMap.Size(30, 30)
  });

  var lhplIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/lhpl_logo.png', // 黎黄陂路图标
    imageSize: new AMap.Size(30, 30)
  });

  var xbkIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/xbk.png', // 星巴克图标
    imageSize: new AMap.Size(30, 30)
  });

  var mdouIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mdou.png', // m豆旗舰店图标
    imageSize: new AMap.Size(30, 30)
  });

  var shckIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/sihangcangku.png', // 上海四行仓库抗战纪念馆
    imageSize: new AMap.Size(30, 30)
  });

  var wiggleIcon = new AMap.Icon({
    size: new AMap.Size(30, 30), // 图标尺寸
    image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/wiggle.png', // wiggle
    imageSize: new AMap.Size(30, 30)
  });

  // 创建标记的函数
  function createMarker(lngLat, icon, title) {
    var marker = new AMap.Marker({
      position: lngLat,
      icon: icon, // 设置图标
      title: title // 设置标记的名称
    });

    // 创建信息窗口
    var infoWindow = new AMap.InfoWindow({
      content: title, // 信息窗口的内容
      offset: new AMap.Pixel(0, -30) // 信息窗口的偏移量
    });

    // 为标记添加点击事件，点击标记时显示信息窗口
    marker.on('click', function() {
      infoWindow.open(map, marker.getPosition()); // 在标记位置打开信息窗口
    });

    marker.setMap(map);
  }

  // 创建标记并加上文字备注
  createMarker(new AMap.LngLat(121.547638,31.240391), kgIcon, '沈家路946弄');
  createMarker(new AMap.LngLat(121.538923,31.244526), jhlIcon, '奥乐齐（滨江光合新座店）');
  createMarker(new AMap.LngLat(121.545106,31.241805), wiggleIcon, '洋泾社区食堂');
  // createMarker(new AMap.LngLat(121.530572,31.24182), hhlIcon, '中信五牛城');
  createMarker(new AMap.LngLat(121.528633,31.232958), shckIcon, '梅园五街坊');




  //2、添加路线标记
  //2.1 游轮航线
  // 多个地铁站的经纬度
  // var ferryLine = [
  //   [114.294686,30.550602],
  //   [114.297382,30.575406]
  // ];
  //
  // // 创建一个折线对象，连接所有地铁站
  // var ferryPolyline1 = new AMap.Polyline({
  //   path: ferryLine, // 所有地铁站的经纬度路径
  //   strokeColor: "#00ADEF", // 线路颜色（设置为明亮的蓝色以模拟水色）
  //   strokeOpacity: 1, // 线路的透明度
  //   strokeWeight: 4, // 线路的粗细
  //   lineJoin: 'round', // 线条连接处样式
  //   lineCap: 'round', // 线条的端点样式
  //   strokeStyle: "dashed", // 设置线条为虚线
  //   strokeDasharray: [10, 5, 10, 5] // 自定义虚线的样式，数组内为线段和间隙的长度
  // });
  //
  //
  // // 将折线添加到地图中
  // ferryPolyline1.setMap(map);
  //
  // //2.2 源深路 - 陆家嘴
  // // 多个地铁站的经纬度
  // var metroLine1 = [
  //   [121.530972,31.241346], // 汉口站-地铁站
  //   [121.519286,31.240366], // 范湖-地铁站
  //   [121.512464,31.238517],
  //   [121.502133,31.23831]
  // ];
  //
  // // 创建一个折线对象，连接所有地铁站
  // var metroPolyline1 = new AMap.Polyline({
  //   path: metroLine1, // 所有地铁站的经纬度路径
  //   strokeColor: "#5DB996", // 线路颜色
  //   strokeOpacity: 1, // 线路的透明度
  //   strokeWeight: 9, // 线路的粗细，数值越大越粗
  //   lineJoin: 'round', // 线条连接处样式
  //   lineCap: 'round' // 线条的端点样式
  // });
  //
  // // 将折线添加到地图中
  // metroPolyline1.setMap(map);

  //2.3 南京西路 - 四行仓库
  // 多个地铁站的经纬度
  var metroLine2 = [
    [121.475133,31.232713],
    [121.45998,31.229886],
    [121.460092,31.241527],
    [121.471474,31.242386]
  ];

  // 创建一个折线对象，连接所有地铁站
  var metroPolyline2 = new AMap.Polyline({
    path: metroLine2, // 所有地铁站的经纬度路径
    strokeColor: "#8D0B41", // 线路颜色
    strokeOpacity: 1, // 线路的透明度
    strokeWeight: 9, // 线路的粗细，数值越大越粗
    lineJoin: 'round', // 线条连接处样式
    lineCap: 'round' // 线条的端点样式
  });

  // 将折线添加到地图中
  metroPolyline2.setMap(map);


</script>
</body>
</html>
